<template>
  <div class="container">
    <div class="show" v-for="follow in follows" :key="follow.id">
      <div class="head">
        <img src="../../assets/img/头像.png" alt="" />
        <div class="introduce">
          <div class="nickname">
            <span>{{ follow.nickname }}</span>
          </div>
          <div class="tradition">
            <p>{{ follow.tradition }}</p>
          </div>
        </div>

        <div class="btn" @click="cancel(follow.id)">
          <el-button type="primary">{{ isFollow }}</el-button>
        </div>
      </div>
    </div>
    <div class="page" v-show="follows.length != 0">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageDto.pageSize"
        :current-page.sync="pageDto.curPage"
        layout="total, prev, pager, next"
        :total="totalPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import instance from "../../utils/request";
import { Message } from "element-ui";
export default {
  name: "FollowListUser",
  data() {
    return {
      follows: [
        {
          id: 1,
          nickname: "wbb",
          tradition: "i am wbb",
        },
        {
          id: 2,
          nickname: "cyk",
          tradition: "i am cyk",
        },
      ],
      pageDto: {
        curPage: 1,
        //总页数
        //每页显示条数
        pageSize: 5,
        id: localStorage.getItem("id"),
      },
      totalPage: 0,
      isFollow: "已关注",
    };
  },
  methods: {
    cancel(Id) {
      //取消关注
      instance
        .post("/user/relation/follow", {
          followerId: localStorage.getItem("id"),
          followedId: Id,
        })
        .then((success) => {
          if (this.isFollow == "已关注") {
            if (success.data.code == 10000) {
              this.isFollow = "关注";
              Message.success("取关成功");
            } else {
              Message.error("取关失败，请稍后再试");
            }
          } else {
            if (success.data.code == 10000) {
              Message.success("关注成功");
              this.isFollow = "已关注";
            } else {
              Message.error("关注失败，请稍后再试");
            }
          }
        })
        .catch((error) => {
          Message.error("系统出错啦，请稍后再试");
          console.log(error);
        });
    },
    handleCurrentChange() {
      instance
        .post("user/relation/follow_list", this.pageDto)
        .then((success) => {
          if (success.data.code == 10000) {
            this.follows = success.data.data.list;
          }
        })
        .catch((error) => {
          Message.error("服务器获取数据失败");
          console.log(error);
        });
    },
  },
  beforeMount() {
    instance
      .post("/user/relation/follow_list", this.pageDto)
      .then((success) => {
        if (success.data.code == 10000) {
          this.articles = success.data.data.list;
          this.totalPage = success.data.data.total;
        } else {
          Message.error("关注列表获取异常，稍后重试");
        }
      })
      .catch((error) => {
        Message.error("关注列表获取错误"), console.log(error);
      });
  },
};
</script>

<style scoped>
.container {
  height: 100%;
  overflow: auto;
  max-height: 400px;
}
.show {
  border-bottom: 1px solid gainsboro;
  margin-top: 10px;
}
img {
  width: 80px;
  margin: 10px 2%;
  border-radius: 40px;
}
.head {
  display: flex;
  justify-content: left;
  align-items: center;
}
.head span {
  margin-top: -40px;
  font-size: 17px;
  font-weight: 700;
}
.introduce {
  display: flex;
  flex-direction: column;
}
.nickname {
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
}
.tradition {
  width: 700px;
  margin-bottom: 5px;
}
.btn {
  margin-left: 50px;
}
.btn > button {
  background-color: rgb(5, 109, 232);
  width: 100px;
  font-size: 16px;
  text-align: center;
}
.page {
  width: 450px;
  height: 30px;
  margin: 5px auto;
}
</style>